import React, { useEffect } from 'react';
import styled from 'styled-components';

import { useParams , useRouteMatch} from 'react-router-dom';
import { useWallet } from 'use-wallet';

import Button from '../../components/Button';
import PageHeader from '../../components/PageHeader';
import Spacer from '../../components/Spacer';
import Harvest from './components/Harvest';
import Stake from './components/Stake';

import HarvestBlack from './components/HarvestBlack';
import StakeBlack from './components/StakeBlack';
import useBank from '../../hooks/useBank';
import useBankBlack from '../../hooks/useBankBlack';
import useRedeem from '../../hooks/useRedeem';
import { Bank as BankEntity } from '../../basis-cash';
import icon from '../../assets/image/icon.png';

const Bank: React.FC = () => {
  useEffect(() => window.scrollTo(0, 0));

  const { bankId } = useParams();
  const { path } = useRouteMatch();
  let bank1 = useBank(bankId);
  let bank2 = useBankBlack(bankId);
  let bank;
  let bankTrue = true;
  let decimal = 6;
  // console.log(path,'-----path',bankId);
  if(path=='sCASH_TPT_pool'){
    decimal = 4;
  }
  if (path.indexOf('Blackhole') > 0) {
    bank = bank2;
    bankTrue = false;
  }else{
    bank = bank1;
    bankTrue = true;
  }
  // const bank = useBank(bankId);

  const { account } = useWallet();
  const { onRedeem } = useRedeem(bank);
  console.log('!!!!!', bankId, path,path.indexOf('Blackhole'),'####', bank,account)
  const tokens = ["fUSDT","fHUSD","fHT","fpNEO","fETH","fHBTC","fHDOT","fHFIL","fHLTC","Filda"];

  return account && bank ? (
    <>
      <PageHeader
        icon={<img
          src={icon}
          alt='logo'
          width={400}
        />}
        subtitle={bankTrue ? `Deposit ${bank?.depositTokenName} and earn ${bank?.earnTokenName}` : `Donate ${bank?.depositTokenName} Get ${bank?.earnTokenName} Reward`}
        title={bank?.name}
        showTips={tokens.includes(bank.depositTokenName)}
      />
      
      <StyledBank>
        <StyledCardsWrapper>
          <StyledCardWrapper>
            {
              bankTrue?<Harvest bank={bank} />: <HarvestBlack bank={bank} />
            }
          </StyledCardWrapper>
          <Spacer />
          <StyledCardWrapper>
            {
              bankTrue?<Stake 
              bank={bank} 
              // decimal={decimal}
              />: <StakeBlack 
              bank={bank} 
              decimal={decimal}
              />
            }
          </StyledCardWrapper>
        </StyledCardsWrapper>
        <Spacer size="lg" />
        {bank.depositTokenName.includes('LP') && <LPTokenHelpText bank={bank} />}
        <Spacer size="lg" />
        {
          bankTrue && <div>
          <Button onClick={onRedeem} text="Settle & Withdraw" />
        </div>
        }
        <Spacer size="lg" />
      </StyledBank>
    </>
  ) : !bank ? (
    <BankNotFound />
  ) : (
    <UnlockWallet />
  );
};

const LPTokenHelpText: React.FC<{ bank: BankEntity }> = ({ bank }) => {
  let pairName: string;
  let uniswapUrl: string;
  if (bank.depositTokenName.includes('sCASH')) {
    pairName = 'sCASH';
    uniswapUrl = 'https://ht.mdex.com/#/swap?inputCurrency=0x0298c2b32eae4da002a15f36fdf7615bea3da047&outputCurrency=0xb6ccFA7Ef3a295932536E0988CffD85228cB177c';
  } else {
    pairName = 'SHARE';
    uniswapUrl = ' https://ht.mdex.com/#/swap?inputCurrency=0x0298c2b32eae4da002a15f36fdf7615bea3da047&outputCurrency=0x41198c6736d23734E6d17a6F0B4f2D15d2621A3a';
  }
  return (
    <StyledLink href={uniswapUrl} target="_blank">
      {`Provide liquidity to ${pairName} on Mdex`}
    </StyledLink>
  );
};

const BankNotFound = () => {
  return (
    <Center>
      <PageHeader
        icon="🏚"
        title="Not Found"
        subtitle="You've hit a bank just robbed by unicorns."
      />
    </Center>
  );
};

const UnlockWallet = () => {
  const { connect } = useWallet();
  return (
    <Center>
      <Button onClick={() => connect('injected')} text="Unlock Wallet" />
    </Center>
  );
};

const StyledBank = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
  @media (max-width: 768px) {
    width: 100%;
  }
`;

const StyledUniswapLPGuide = styled.div`
  margin: -24px auto 48px;
`;

const StyledLink = styled.a`
  font-weight: 700;
  text-decoration: none;
  color: ${(props) => props.theme.color.primary.main};
`;

const StyledCardsWrapper = styled.div`
  display: flex;
  width: 600px;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
  }
`;

const StyledCardWrapper = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
  @media (max-width: 768px) {
    width: 80%;
  }
`;

const Center = styled.div`
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
`;

export default Bank;
